<template>
  <div>
    <van-nav-bar title="核酸检测报告" left-arrow @click-left="$router.go(-1)" />
    <div class="content" v-if="info">
      <div class="card1">
        <p>姓名：{{ info.name }}</p>
        <p>身份证号：{{ info.id_number }}</p>
        <p>年龄：24岁</p>
        <p>送检查科室：保健科</p>
        <p>标本种类：鼻咽拭子</p>
        <p>标本编号：123476</p>
        <p>检测方法：实时荧光定量（PCR）技术</p>
        <p>
          采样日期：{{ moment.unix(info.appoint_time).format("YYYY-MM-DD") }}
        </p>
      </div>
      <div class="card2">
        <p>检测报告</p>
        <p>
          项目：<span class="span1">{{ info.test_name }}</span>
        </p>
        <p>检测结果：<span class="span2">阴性</span></p>
      </div>
      <div class="card3">
        <p>
          采样日期：{{ moment.unix(info.appoint_time).format("YYYY-MM-DD") }}
        </p>
        <p>
          报告日期：{{ moment.unix(info.appoint_time).format("YYYY-MM-DD") }}
        </p>
        <p>检验人员：王静</p>
        <p>审核人员：刘凤</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    let pid = this.$route.query.pid;
    let appoint_time = this.$route.query.appoint_time
    this.axios
      .get(`${this.$base}appointment/reportdetail?pid=${pid}&appoint_time=${appoint_time}`)
      .then((res) => {
        // console.log(res.data);
        this.info = res.data.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.content {
  width: 90%;
  height: 90vh;
  margin: 0 auto;
  font-size: 3.75vw;
}
.card1,
.card2,
.card3 {
  color: #7e7474;
  background-color: #f5f9ff;
  padding: 1.5vw 5vw;
  border-radius: 3px;
  margin-top: 3vw;
  box-shadow: 0 1px 1px #e3e3e3;
}

.card2 {
  .span1 {
    color: #000;
  }
  .span2 {
    color: #2ed477;
  }
}
</style>